import { Canvas, Story, Meta } from "@storybook/addon-docs";
import { Icon } from "metabase/ui";
import { Stack, TextInput } from "metabase/ui";

export const args = {
  variant: "default",
  size: "md",
  label: "Label",
  description: undefined,
  error: undefined,
  placeholder: "Placeholder",
  disabled: false,
  readOnly: false,
  withAsterisk: false,
};

export const sampleArgs = {
  value: "Metabase",
  label: "Company or team name",
  description: "Name used for this instance",
  placeholder: "Department of awesome",
  error: "required",
};

export const argTypes = {
  variant: {
    options: ["default", "unstyled"],
    control: { type: "inline-radio" },
  },
  size: {
    options: ["xs", "md"],
    control: { type: "inline-radio" },
  },
  label: {
    control: { type: "text" },
  },
  description: {
    control: { type: "text" },
  },
  placeholder: {
    control: { type: "text" },
  },
  error: {
    control: { type: "text" },
  },
  disabled: {
    control: { type: "boolean" },
  },
  readOnly: {
    control: { type: "boolean" },
  },
  withAsterisk: {
    control: { type: "boolean" },
  },
};

<Meta
  title="Inputs/TextInput"
  component={TextInput}
  args={args}
  argTypes={argTypes}
/>

# TextInput

Our themed wrapper around [Mantine TextInput](https://v6.mantine.dev/core/text-input/).

## Docs

- [Figma File](https://www.figma.com/file/oIZhYS5OoRA7twd4KqN4Eu/Input-%2F-Text?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
- [Mantine TextInput Docs](https://v6.mantine.dev/core/text-input/)

## Examples

export const DefaultTemplate = args => <TextInput {...args} />;

export const VariantTemplate = args => (
  <Stack>
    <TextInput {...args} variant="default" />
    <TextInput {...args} variant="unstyled" />
  </Stack>
);

export const IconTemplate = args => (
  <VariantTemplate {...args} icon={<Icon name="dashboard" />} />
);

export const RightSectionTemplate = args => (
  <VariantTemplate {...args} rightSection={<Icon name="chevrondown" />} />
);

export const Default = DefaultTemplate.bind({});

<Canvas>
  <Story name="Default">{Default}</Story>
</Canvas>

### Size - md

export const EmptyMd = VariantTemplate.bind({});

<Canvas>
  <Story name="Empty, md">{EmptyMd}</Story>
</Canvas>

#### Filled

export const FilledMd = VariantTemplate.bind({});
FilledMd.args = {
  defaultValue: sampleArgs.value,
  label: sampleArgs.label,
  placeholder: sampleArgs.placeholder,
};

<Canvas>
  <Story name="Filled, md">{FilledMd}</Story>
</Canvas>

#### Asterisk

export const AsteriskMd = VariantTemplate.bind({});
AsteriskMd.args = {
  label: sampleArgs.label,
  placeholder: sampleArgs.placeholder,
  withAsterisk: true,
};

<Canvas>
  <Story name="Asterisk, md">{AsteriskMd}</Story>
</Canvas>

#### Description

export const DescriptionMd = VariantTemplate.bind({});
DescriptionMd.args = {
  label: sampleArgs.label,
  description: sampleArgs.description,
  placeholder: sampleArgs.placeholder,
};

<Canvas>
  <Story name="Description, md">{DescriptionMd}</Story>
</Canvas>

#### Disabled

export const DisabledMd = VariantTemplate.bind({});
DisabledMd.args = {
  label: sampleArgs.label,
  description: sampleArgs.description,
  placeholder: sampleArgs.placeholder,
  disabled: true,
  withAsterisk: true,
};

<Canvas>
  <Story name="Disabled, md">{DisabledMd}</Story>
</Canvas>

#### Error

export const ErrorMd = VariantTemplate.bind({});
ErrorMd.args = {
  label: sampleArgs.label,
  description: sampleArgs.description,
  placeholder: sampleArgs.placeholder,
  error: sampleArgs.error,
  withAsterisk: true,
};

<Canvas>
  <Story name="Error, md">{ErrorMd}</Story>
</Canvas>

#### Icon

export const IconMd = IconTemplate.bind({});
IconMd.args = {
  label: sampleArgs.label,
  description: sampleArgs.description,
  placeholder: sampleArgs.placeholder,
  withAsterisk: true,
};

<Canvas>
  <Story name="Icon, md">{IconMd}</Story>
</Canvas>

#### Right section

export const RightSectionMd = RightSectionTemplate.bind({});
RightSectionMd.args = {
  label: sampleArgs.label,
  description: sampleArgs.description,
  placeholder: sampleArgs.placeholder,
  withAsterisk: true,
};

<Canvas>
  <Story name="Right section, md">{RightSectionMd}</Story>
</Canvas>

#### Read only

export const ReadOnlyMd = RightSectionTemplate.bind({});
ReadOnlyMd.args = {
  defaultValue: sampleArgs.value,
  label: sampleArgs.label,
  description: sampleArgs.description,
  placeholder: sampleArgs.placeholder,
  readOnly: true,
};

<Canvas>
  <Story name="Read only, md">{ReadOnlyMd}</Story>
</Canvas>

### Size - xs

export const EmptyXs = VariantTemplate.bind({});
EmptyXs.args = {
  ...EmptyMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Empty, xs">{EmptyXs}</Story>
</Canvas>

#### Filled

export const FilledXs = VariantTemplate.bind({});
FilledXs.args = {
  ...FilledMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Filled, xs">{FilledXs}</Story>
</Canvas>

#### Asterisk

export const AsteriskXs = VariantTemplate.bind({});
AsteriskXs.args = {
  ...AsteriskMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Asterisk, xs">{AsteriskXs}</Story>
</Canvas>

#### Description

export const DescriptionXs = VariantTemplate.bind({});
DescriptionXs.args = {
  ...DescriptionMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Description, xs">{DescriptionXs}</Story>
</Canvas>

#### Disabled

export const DisabledXs = VariantTemplate.bind({});
DisabledXs.args = {
  ...DisabledMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Disabled, xs">{DisabledXs}</Story>
</Canvas>

#### Error

export const ErrorXs = VariantTemplate.bind({});
ErrorXs.args = {
  ...ErrorMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Error, xs">{ErrorXs}</Story>
</Canvas>

#### Icon

export const IconXs = IconTemplate.bind({});
IconXs.args = {
  ...IconMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Icon, xs">{IconXs}</Story>
</Canvas>

#### Right section

export const RightSectionXs = RightSectionTemplate.bind({});
RightSectionXs.args = {
  ...RightSectionMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Right section, xs">{RightSectionXs}</Story>
</Canvas>

#### Read only

export const ReadOnlyXs = RightSectionTemplate.bind({});
RightSectionXs.args = {
  ...ReadOnlyMd.args,
  size: "xs",
};

<Canvas>
  <Story name="Read only, xs">{ReadOnlyXs}</Story>
</Canvas>
